<!-- 首页 -->
<template>
  <view>
    <!-- 搜索栏区域 -->
   <view class="home_box">
      <my_search></my_search>
   </view>
    <!-- 轮播图区域 -->
    <swiper 
      indicator-dots 
      autoplay 
      interval="2000"
      indicator-active-color="white" 
      circular 
      duration="1000" class="swiper_list">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <navigator 
        class="swiper_image" 
        :url="'/subpkg/goods_detail/goods_detail?goods_id='+ item.goods_id">
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 分类按钮区域 -->
    <view class="nav_view">
      <view v-for="(item,index) in navList" :key="index" @click="navigators(item.name)">
        <image :src="item.image_src"></image>
      </view>
    </view>
    <!-- 楼层区域 -->
    <view class="floor_view">
      <view class="floor_item" v-for="(item,index) in floorList" :key="index">
        <!-- 楼层标题区域 -->
        <image class="top_tilte" :src="item.floor_title.image_src"></image>
        <!-- 楼层图片区域 -->
        <view class="floor_img">
          <navigator class="left_img" :url="item.product_list[0].navigator_url">
            <image 
              :src="item.product_list[0].image_src" 
              :style="{width:item.product_list[0].image_width + 'rpx' }" mode="widthFix">
            </image>
          </navigator>
          <!-- 右侧四个图片的盒子 -->
          <view class="right_imgs">
            <navigator class="view_item" 
              v-for="(itemTwo,index2) in item.product_list" 
              v-if="index2 !== 0"
              :url="itemTwo.navigator_url"
              :key="index2">
                <image 
                  :src="itemTwo.image_src" 
                  :style="{width:itemTwo.image_width + 'rpx'}"
                  mode="widthFix">
                </image>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 轮播图数组
         swiperList:[],
         // 分类导航数组
         navList:[],
         // 楼层数组
         floorList:[]
      }
    },
    // 项目初始化调用的生命周期函数
    onLoad() {
      this.getSwiperList()
      this.getNavList()
      this.getFloorList()
    },
    methods:{
      // 获取轮播图函数
      async getSwiperList() {
        const { data } =  await uni.$http.get('/api/public/v1/home/swiperdata')
        if(data.meta.status !== 200) return uni.$showMsg()
        this.swiperList = data.message
      },
      // 获取分类导航函数
      async getNavList() {
        const { data } = await uni.$http.get('/api/public/v1/home/catitems')
        if(data.meta.status !== 200) return uni.$showMsg()
        this.navList = data.message
      },
      // 获取楼层数据的函数
      async getFloorList() {
        const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
        if (res.meta.status !== 200) return uni.$showMsg()
        res.message.forEach(item => {
          item.product_list.forEach(url => {
            url.navigator_url = '/subpkg/goods_list/goods_list?'
                              + url.navigator_url.split('?')[1]            
          })
        })
        this.floorList = res.message
      },
      // 点击分类导航的函数
      navigators(name) {
        console.log(name)
        if(name === '分类') {
          uni.switchTab({
            url:'/pages/cate/cate'
          })
        } else {
          uni.$showMsg("没钱钱惹！v我50继续开发！")
        }
      }
    },
  }
</script>

<style lang="scss">
.home_box {
  // 吸顶效果 
  position:sticky;
  top: 0;
  z-index: 999;
}
.swiper_list {
  height: 330rpx;
  
  .swiper_image {
    height: 100%;
    
    image {
      width: 100%;
      height: 100%;
    }
  } 
}
.nav_view {
  display: flex;
  justify-content: space-around;
  margin: 30rpx 0;

    image {
     width: 128rpx;
     height: 140rpx;
  }
}
.floor_view {
  
  .floor_item {
    
    .top_tilte {
      width: 100%;
      height: 60rpx; 
    }
    
    .floor_img {
      display: flex;
      flex-direction: row;
      
      .left_img {
        margin-left: 10rpx;
      }
      .right_imgs {
        display: flex;
        flex-wrap:wrap;
        justify-content: space-around;
      }
    }
  }
}
</style>